<template>
  <div>
    <el-form
    ref="configsForm"
    :rules="configsRule"
    label-width="150px"
    :model="form" class="demo-form-inline">
    <el-row>
      <el-col :span="12">
        <el-form-item label="提现流水倍数设置" prop="multiple">
          <el-input placeholder="请输入金额" v-model.number="form.multiple" @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})">
            <template slot="append">倍数</template>
          </el-input>
          <el-tip>注:提现流水 = 充值金额 x 倍数</el-tip>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="每天提现金额上限" prop="amountLimit">
          <el-input placeholder="请输入金额" v-model.number="form.amountLimit" @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})">
            <template slot="append">元</template>
          </el-input>
          <el-tip>注:达到“提现金额”上限后，则无法进行提现</el-tip>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="提示说明开关" prop="tipStatus">
          <el-switch active-value="1" inactive-value="0" v-model="form.tipStatus"></el-switch>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="m-configs">
      <el-tip>注：代理账户提现则不受“提现流水倍数”及“每天提现金额上限“限制</el-tip>
    </div>
    <div style="padding: 20px 0 20px 150px">
      <el-button v-if="roleCheck('withdraw-config-save')" class="filter-item" type="primary" icon="el-icon-printer"
                 @click="doSave({action: 'saveForm', form: 'configsForm'})">保存
      </el-button>
    </div>
  </el-form>
<!--拒绝理由设置-->
    <div class="refuse-reasons-wrapper">
      <h5>拒绝提现快捷理由设置</h5>
      <div><el-button @click="addReason">新增</el-button></div>
      <el-form ref="refuseForm" size="medium" class="refuseForm">
        <el-form-item v-for="(item,index) in refuseReasons" :key="index">
          <el-input v-model="item.value" @keyup.enter.native="saveRefuseReasons"></el-input>
          <el-button @click.prevent="removeReason(item)" class="refuseForm__delete-btn">删除</el-button>
        </el-form-item>
      </el-form>
      <div><el-button @click="saveRefuseReasons" type="primary">保存</el-button></div>
    </div>

  </div>
</template>

<script>
import { form, factory } from '@/build';
import {
  withdrawNormalSetting, withdrawNormalSettingSave, withdrawRefuseReasonList, withdrawRefuseReasonSave,
} from '@/services/api/withdraw';

export default {
  name: 'withdraw-setting',
  mixins: [form, factory],
  data() {
    return {
      inline: true,
      refuseReasons: [{
        value: '',
      }],
      filters: {
        reasons: [],
      },
      form: {
        tipStatus: 0,
      },
      configsRule: {
        daybook: [
          { required: true, message: '提现流水倍数设置不能为空' },
        ],
        min: factory.getRule('moneyType'),
        max: factory.getRule('moneyType'),
      },
      refuseData: '',
    };
  },
  mounted() {
    this.getRefuseReasons();
    // tab页记录访问日志
    this.$store.dispatch(types.SAVE_OPERATION_LOG, { content: _.getContent(this.$route, '提现相关设置', true) });
    this.bindSave(withdrawNormalSettingSave, 'saveForm', 'form', {
    });
    this.bindGet(withdrawNormalSetting, 'form', {
      format: data => data || this.form,
    });
    this.getAll();
    this.bindSave(withdrawRefuseReasonSave, 'saveRefuseReasons', 'filters', {});
  },
  methods: {
    saveRefuseReasons() {
      const refuseReasons = [];
      for (const item of this.refuseReasons) {
        const value = item.value.trim();
        if (value) {
          if (!refuseReasons.includes(value)) {
            refuseReasons.push(value);
          } else {
            this.$notify({
              title: '不能重复设置拒绝理由',
              // message: errorMessage,
              type: 'error',
              duration: 2000,
            });
            return;
          }
        } else {
          this.$notify({
            title: '拒绝理由不能为空',
            // message: errorMessage,
            type: 'error',
            duration: 2000,
          });
          return;
        }
      }
      this.filters.reasons = refuseReasons.toString();
      this.doSave({ action: 'saveRefuseReasons', form: 'refuseForm' });
    },
    getRefuseReasons() {
      this.bindGet(withdrawRefuseReasonList, 'refuseReasons', {
        action: 'getRefuseReasons',
        format: (data) => {
          const refuseReasons = [];
          for (const item of data) {
            refuseReasons.push({
              value: item,
              key: Date.now(),
            });
          }
          return refuseReasons;
        },
      });
    },
    addReason() {
      this.refuseReasons.push({
        value: '',
        key: Date.now(),
      });
    },
    removeReason(item) {
      const index = this.refuseReasons.indexOf(item);
      if (index !== -1) {
        this.refuseReasons.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
  .with-pre-select {
    .el-input-group__prepend {
      .el-select {
        width: 120px;
      }
    }
  }

  .money-range {
    .el-input {
      width: 100px;
    }
  }

  .m-configs {
    margin-top: 20px;
  }
  .refuse-reasons-wrapper{
    padding-top: 20px;
    border-top: 1px solid #dcdfe6;
    .refuseForm{
      margin-top: 20px;
      .el-input {
        width: 28%;
      }
      .refuseForm__delete-btn{
        margin-left: 20px;
      }
    }
  }

</style>
